<template>
  <div style="width: 1200px;margin: 0 0 0 90px ">
    <el-card>
      <el-row>
        <div>
          <el-col  :span="8" style="text-align: center;">
            <p>陪诊员:{{staff.username}}</p>
          </el-col>
        </div>
        <el-col :span="16" style="margin-top: 10px">
          陪诊服务:
          <div class="block">
            <el-rate
                v-model="param.staffServer"
                :colors="colors">
            </el-rate>
          </div>

        </el-col>
      </el-row>
    </el-card>

    <el-card style="margin-top: 20px">
      <el-row>
        <el-col :span="8" style="text-align: center">
          <div style="margin:60px 0 40px 0 ">
            <img width="200px" :src="staff.picImgeRul" alt="">
          </div>
        </el-col>
        <el-col :span="16">
          <p>评论内容:</p>
          <el-input
              type="textarea"

              :rows="2"
              placeholder="请输入内容"
              v-model="param.comment"
              :autosize="{ minRows: 10, maxRows: 5}">
          </el-input>
          <!--          <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        list-type="picture">
                      <br>

                      <el-upload  style="float: left"
                                  action="https://jsonplaceholder.typicode.com/posts/"
                                  list-type="picture-card"
                                  :on-preview="handlePictureCardPreview"
                                  :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                      </el-dialog>

                    </el-upload>-->
        </el-col>
      </el-row>
      <el-row>
        <el-switch
            v-model="value1"
            active-text="匿名"
        >
        </el-switch>
        <el-button type="danger" style="text-align: center;margin: 0 0 0 390px;" @click="addNewComment">发表</el-button>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import axios from "axios";
import staff from "@/views/user/staff.vue";
import TokenAxios from "@/http/TokenAxios";
import BaseUrl from "@/http/BaseUrl";

export default {
  data() {
    return {
      value1: 1,
      value2: null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],// 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      textarea: "",
      // fileList: [{name: '', url: ''}, {name: '', url: ''}]
      imageUrl: '',
      staff:  {goodsId: ''},
      param:{staffServer:'5',
        imgeUrl:'',
        comment:'',
        goodsId:''
      }
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    addNewComment(){
      console.log(this.staff.goodsId)
      this.param.goodsId = this.staff.goodsId;
      TokenAxios.post(BaseUrl.SINGIN+'/evaluations/add-new',this.param).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message.success("发表成功!!!")
          this.$router.push({name:"order"})
        }else {
          this.$message.error(jsonResult.message)
        }

      })
    },
    getStaff(id){
      TokenAxios.get(BaseUrl.INFORMATIOON+'/employees/staff/' + id).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.staff = jsonResult.data;
        }else {
          this.$message.error(jsonResult.message)
        }
      })
    }

  },

  created(){
    const id = this.$route.params.id
    this.getStaff(id)

  }
}
</script>

<style scoped>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>
